﻿
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section style{
    <link rel="stylesheet" href="~/Content/plugins/bootstrap-table/bootstrap-table.css">
}

<style>
    .rowtop {
        margin-top: 15px;
    }

    .operateLft {
        margin-left: 5px;
    }

    .diagCenter {
        text-align: center;
        line-height: 34px;
        margin-top: 5px;
    }
</style>

<h2>Index</h2>

<div class="row">
    <div class="col-xs-4">
        <input type="text" id="UserName" name="UserName" class="form-control" placeholder="用户名">
    </div>
    <div class="col-xs-4">
        <input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="手机号">
    </div>
    <div class="col-xs-4">
        <button type="button" class="btn btn-primary" onclick="queryData()"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询</button>
        <button type="button" class="btn btn-default" onclick="resetQuery()"><span class="glyphicon glyphicon-erase" aria-hidden="true"></span> 重置</button>
    </div>
</div>
<div class="row rowtop">
    <div class="col-xs-12">
        <table class="table table-hover" id="userlist">
            <thead>
                <tr>
                    <th data-field="Id">用户名</th>
                    <th data-field="UserName">用户名</th>
                    <th data-field="UserPhone">用户手机号</th>
                    <th data-field="LastDate">最后登录时间</th>
                    <th data-field="CreateDate">创建时间</th>
                    <th data-field="LoginAt">登录次数</th>
                    <th data-field="Id" data-formatter="oprate">操作</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<div class="modal fade " backdrop="static" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">重置密码</h4>
            </div>
            <div class="modal-body">
                <div class="row diagCenter">
                    <div class="col-lg-2 col-md-2">旧密码</div>
                    <div class="col-lg-10 col-md-10">
                        <input type="password" class="form-control" id="oldPwdinpt" placeholder="请输入旧密码">
                    </div>
                </div>
                <div class="row diagCenter">
                    <div class="col-lg-2 col-md-2">输入密码</div>
                    <div class="col-lg-10 col-md-10">
                        <input type="password" class="form-control" id="newPwdinpt" placeholder="请输入新密码">
                    </div>
                </div>
                <div class="row diagCenter">
                    <div class="col-lg-2 col-md-2">确认密码</div>
                    <div class="col-lg-10 col-md-10">
                        <input type="password" class="form-control" id="confirNewPwdinpt" placeholder="请输入确认密码">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="resetPwd()">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade " backdrop="static" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改手机号</h4>
            </div>
            <div class="modal-body">
                <div class="row ">
                    <div class="col-lg-2 col-md-2">用户名称</div>
                    <div class="col-lg-10 col-md-10">
                        <span id="username"></span>
                    </div>
                </div>
                <div class="row diagCenter">
                    <div class="col-lg-2 col-md-2">手机号码</div>
                    <div class="col-lg-10 col-md-10">
                        <input  type="text" class="form-control" id="phone" placeholder="请输入手机号码">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveusrinfo()">确定</button>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript" src="~/Content/plugins/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="~/Content/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script>
        function inintTable() {
            $('#userlist').bootstrapTable({
                method: "post",
                url: "/User/UserList",
                dataField: "data",
                pagination: true,
                pageSize: 20,
                pageList: [20, 25, 50, 100],
                sidePagination: 'server',
                responseHandler: function (res) {
                    return {
                        total: res.total,//总页数
                        data: res.data   //数据
                    };
                },
                queryParams: function (params) {
                    return {
                        UserName: $("#UserName").val(),
                        UserPhone: $("#UserPhone").val(),
                        PageSize: params.limit,
                        PageNum: params.offset / params.limit + 1
                    };
                },
                onLoadError: function (status) {
                    if (status == 401) {
                        redirectLogin(status)
                    }
                }
            });
        }

        $(function () {
            inintTable();
        })

        function queryData() {
            $('#userlist').bootstrapTable('refresh');
        }

        function resetQuery() {
            $("#UserName").val('');
            $("#UserPhone").val('');
            $('#userlist').bootstrapTable('refresh');
        }

        function oprate(value, row, index) {

            var editLink = "<a href='javascript:void(0);' class=\"operateLft\"   onclick= editRow('" + value + "','" + row.UserPhone + "','" + row.UserName + "')>编辑</a>";
            var deleteLink = "<a href='javascript:void(0);' class=\"operateLft\"  onclick= deleteRow('" + value + "','" + row.UserName + "')>删除</a>";
            var modifyPwdLink = "<a href='javascript:void(0);' class=\"operateLft\" onclick=\"openPwdDiag('" + value + "',)\" >重置密码</a>";
            var opertateStrHtml = editLink + modifyPwdLink + deleteLink;
            return opertateStrHtml;
        }

        var userId;

        function openPwdDiag(rowid) {
            userId = rowid;
            $("#myModal").modal({ backdrop: 'static', keyboard: false });
        }

        function editRow(rowid, userphone, username) {
            userId = rowid;
            $("#editModal").modal({ backdrop: 'static', keyboard: false });
            $("#username").text(username);
            $("#phone").val(userphone);
        }

        function saveusrinfo() {
            if (userId) {
                let phoneNumber = $("#phone").val();
                if (validatePhone(phoneNumber)) {
                    var dataPram = {
                        Id: userId,
                        UserPhone: phoneNumber,
                    }

                    request({
                        url: '/User/ModifyPhone',
                        data: dataPram,
                        success: function (data) {
                            if (data && data.code == 200) {
                                $("#editModal").modal('hide');
                                alert("修改成功！")
                                queryData();
                            }
                            else {
                                alert(data.msg);
                            }
                        }
                    })

                } else {
                    alert("手机号不正确，请重新输入！");
                }
            }
        }

        function resetPwd() {
            if (userId) {
                var data = {
                    Id: userId,
                    OldPwd: $("#oldPwdinpt").val(),
                    NewPwd: $("#newPwdinpt").val(),
                    ConfirmNewPwd: $("#confirNewPwdinpt").val(),
                }
                request({
                    url: '/User/ModifyPwd',
                    data: data,
                    success: function (data) {
                        if (data && data.code == 200) {
                            $("#myModal").modal('hide');
                            queryData();
                        }
                        else {
                            alert(data.msg);
                        }
                    }
                })


            }

        }

        function deleteRow(rowId, obj) {
            var diag = confirm("确定要删除账户名为[" + obj + "]吗？");
            if (diag) {
                request({
                    url: '/User/deleteRow',
                    data: { id: rowId },
                    success: function (data) {
                        if (data && data.code == 200) {
                            queryData();
                        }
                        else {
                            alert(data.msg);
                        }
                    }
                })
            }
        }

    </script>
}